<template>
<el-container id='homePager' direction='vertical'>
    <HomeHeader/>
  <el-container direction='horizontal' style="height:100%" v-if="!fullscreenLoading">
    <HomeAsideNav/>
    <el-main class="routerView scrollbar">
      <keep-alive>
        <router-view :isFinish="isfinish" :key="$route.fullPath"></router-view>
      </keep-alive>
     </el-main>
  </el-container>
  <div v-loading.lock="fullscreenLoading" style="height: calc(100vh - 69.6px);z-index:1" v-else></div>
</el-container>
</template>

<script>
import HomeHeader from '@/components/homeHeader'
import HomeAsideNav from '@/components/homeAsideNav'
export default {
  name:'HomePager',
  props: {

  },
  components: {
    HomeHeader,
    HomeAsideNav
  },
  data() {
    return {
      timer:null,
      isfinish:false,
      fullscreenLoading: true
    };
  },
  created() {
    
  },
  mounted() {
    this.getData()
  },
  beforeDestroy() {
   
  },
  methods: {
    async getData(){
        await this.checkUserVerified()
        await this.$http.getRoleById(this,this.RoleId)
        this.isfinish=true
        setTimeout(() => {
          this.fullscreenLoading=false
        }, 1500);
    }
  },
};
</script>

<style scoped lang="scss">

#homePager {
    width: 100%;
    height: 100%;
    text-align: center;
}

.routerView {
    height: 100%;
    text-align: left;
    flex: 1;
    padding: 0px; 
    overflow: auto;
}

</style>
